<template>
  <el-dialog title="系统预估销量设置" width="720" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <el-form :inline="true" :model="formInline" labelPosition="top" class="form-inline">
        <FormTitle title="预估销量设置" />
        <div class="flex flex-wrap items-center gap-y-2">
          <span class="">加权日平均销量=</span>
          <template v-for="(item, i) in formInline?.estimate_sales_config?.average_sales" :key="i">
            <NumberRange v-model="item.day" suffix="天" :min="0" :max="9999" class="w-[160px] mx-[4px]" />
            销量 / <el-input v-model="item.day_num" placeholder="天" clearable class="w-80 mx-[4px] m" />*
            <el-input v-model="item.percent" placeholder="比例" clearable class="input_100 mx-[4px]"> <template #append>%</template></el-input>
            {{ i + 1 >= formInline?.estimate_sales_config?.average_sales.length ? "" : "+" }}
          </template>
        </div>
        <div>说明：如1-30天销量/30*50%+31-60天销量/30*30%+61-90天销量/30*20%，比例参数根据实际情况填写。</div>

        <FormTitle title="销售系数设置" />
        <div class="grid grid-cols-3 w-[100%]">
          <el-form-item :label="item.label" v-for="(item, idx) in argumentsColumns" :key="idx" class="form-item">
            <el-input v-model="formInline.estimate_sales_config[item.field]" placeholder="请填写系数" />
          </el-form-item>
        </div>
        <div>说明：系统预估销量=销售系数*加权日平均销量，各销售系数为空时，默认为1。</div>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" @click="save"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import FormTitle from "@/components/XForm/FormTitle.vue"
import NumberRange from "@/components/NumberRange/index.vue"
import { batchUpdateEstimateSalesConfig } from "@/api/plan"
import { ElMessage } from "element-plus"
const props = defineProps({})
const modelValue = ref(false)
const estimate_sales_config = {
  week_month_rise: "", //周上升且月上升
  month_decline: "", //周上升且月下降
  month_rise: "", //周下降且月上升
  week_month_decline: "", //周下降且月下降
  month_flat: "", //周持平或月持平
  average_sales: [{}, {}, {}],
}
const formInline = ref({
  estimate_sales_config: {},
})
const argumentsColumns = [
  { field: "week_month_rise", label: "周上升且月上升" },
  { field: "month_decline", label: "周上升且月下降" },
  { field: "month_rise", label: "周下降且月上升" },
  { field: "week_month_decline", label: "周下降且月下降" },
  { field: "month_flat", label: "周持平或月持平" },
]

const open = (base_asin_id = []) => {
  modelValue.value = true
  formInline.value.base_asin_id = base_asin_id
  formInline.value.estimate_sales_config = JSON.parse(JSON.stringify(estimate_sales_config))
}

const handleClose = () => {
  modelValue.value = false
  formInline.value.base_asin_id = []
  formInline.value.estimate_sales_config = JSON.parse(JSON.stringify(estimate_sales_config))
}
const save = () => {
  let params = JSON.parse(JSON.stringify(formInline.value))
  params.estimate_sales_config?.average_sales?.forEach((item) => {
    item.day_start = item?.day?.min
    item.day_end = item?.day?.max
    delete item.day
  })

  batchUpdateEstimateSalesConfig(params).then((res) => {
    ElMessage.success(res.message)
    handleClose()
  })
}
defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
.form-inline {
  .form-item {
    margin-right: 8px;
  }
  .w-80 {
    width: 60px;
  }
  .input_100 {
    width: 100px;
    :deep(.el-input-group__append) {
      width: 40px;
      color: #333;
      background: #fafafa;
    }
  }
}
</style>
